<template>
    <div class="bigBox">

        <div v-show="show" style="width:800px">
            <p style="text-align:center;color:white;font-size:30px;">所有文章</p>
            <table border="1" cellpadding="0" cellspacing="0">
                <thead>
                    <tr>
                        <td>标题</td>
                        <td>标签</td>
                        <td>日期</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in myArtical" :key="index">
                        <td @click="goto(index)">{{item.title}}</td>
                        <td>{{item.description}}</td>
                        <td>{{item.date}}</td>
                        <td><a @click="editArtical(index)">编辑</a>|<a @click="deleteArtical(index)">删除</a></td>
                    </tr>
                </tbody>
            </table>
            <button @click="addArtical">添加文章</button>
        </div>

        
        <!-- <div v-show="hide" v-for="(item,index) in myArtical" :key="index">{{item.articalContent}}</div> -->
        <div class="contentDes" v-for="(item,index) in myArtical" v-show="item.hide" :key="index">
            <button @click="back(index)">返回</button>
            <h3 style="text-align:center">{{item.title}}</h3>
            <a>{{item.articalContent}}</a>
            
        </div>
    </div>
</template>
<script>

export default {
    data(){
        return{
            myArtical:[],
            mydate:'',
            show:true
        }
    },
    mounted:function(){
        this.getdata()
        var date=new Date();
        //this.mydate=date.getFullYear()+"/"+date.getMonth()+"/"+date.getDate()+"-"+date.getHours();
        this.mydate=date.getFullYear()+"/"+date.getMonth()+"/"+date.getDate()+"-"+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();

    },
    methods:{
        getdata(){
            this.$axios.get('/api/myBlog/myArtical',{
            params:{
                data:'123',
                _id:this.$route.query._id,
                title:this.$route.query.title,
                description:this.$route.query.description,
                username:sessionStorage.getItem("username"),
                date:this.mydate,
                articalContent:this.$route.query.articalContent
            }
            }).then(res=>{
                this.myArtical=res.data;
                //console.log(this.myArtical[0]._id)
            })
        },
        editArtical(index){
            this.$router.push({path:"/myBlog/edit",query:{
                aa:this.myArtical[index]._id
            }})
        },
        deleteArtical(index){
            // this.$router.push({path:"/myBlog/delete",query:{
            //     aa:this.myArtical(index)._id
            // }})
            this.$axios.get('/api/myBlog/delete',{
                params:{
                    _id:this.myArtical[index]._id,
                    username:sessionStorage.getItem("username")
                }
            }).then(res=>{
                if(res.data!=""){
                    this.myArtical=res.data
                    
                }else{
                    alert("删除失败")
                }
            })
        },
        addArtical(){
            this.$router.push('/myBlog/addArtical')
        },
        goto(index){
            this.myArtical[index].hide=true;
            this.show=false
        },
        back(index){
            this.myArtical[index].hide=false;
            this.show=true
        }
        
    }
}
</script>
<style scoped>
.bigBox{

    display: flex;
    justify-content: center;
    align-items: center;
}
table{
    color:white;
    width:800px;
    text-align: center;
    margin-top: 30px;
}
.bigBox button{
    width: 300px;
    height: 50px;
    border:none;
    display: block;
    margin: 0 auto;
    background-color: #d09d63;
    margin-top:50px;
    color:white;

}
.contentDes{
    border: 1px solid bisque;
    color:white;
    /*text-align: center;
    font-size: 20px; */
    width:700px;
    height: 450px;
    padding: 10px;
}
.contentDes button{
    width:60px;
    height: 30px;
    display: inline-block;
    margin: 0;
    background-color: transparent;
    border:1px solid white;
    border-radius: 5px;
}

thead tr{
    height: 40px;
    background-color:#d86842;
}
tbody tr{
    height: 35px;
    background-color: #d88d51;
}
</style>